// 引入 mobx
import {observable, computed, action} from "mobx";
// 通过class创建一个store
// 如果有多个store，可以通过一个对象来连接这些store
class LoginStore {
    // observable修饰变量， 表示要监听观察这个变量的变化，应该是注册了setter和getter
    @observable firstName = "";
    @observable lastName = "";

    @computed
    get fullName() {
        const {firstName, lastName} = this;
        if (!firstName && !lastName) {
            return "Please input your name!";
        } else {
            return firstName + " " + lastName;
        }
    }

    // 绑定action，action内可以通过this访问本store的observable的变量
    // 如果更改数据较多，用action可以减少渲染次数
    @action.bound
    setValue(key, event) {
        this[key] = event.target.value;
    }

    @action.bound
    doReset() {
        this.firstName = "";
        this.lastName = "";
    }
}

export const loginStore = new LoginStore();